<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.active {
				color: orange;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<com1 :list="heroList">
				<!-- 2. 在父级中接收 slot 传递过来的数据 -->
				<!-- 使用 slot-scope 来接收传递的数据，★ slot-scope 是固定写法， 属性值是自定义的 -->
				<template slot-scope="heroData">
					<!-- 使用接收到传递过来的数据以后，就可以对传递过来的数据，进行判断、操作，从而对样式进行修改 -->
					<!-- 3. 对样式进行修改 -->
					<span :class="heroData.hero.id === 2 ? 'active' : ''">
						{{ heroData.hero.name }}
					</span>
				</template>
			</com1>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 作用域插槽：一般就是指父组件获取到子组件中的数据，然后对子组件进行相应的修改
			// 子组件把样式的修改，交给父级处理

			Vue.component('com1', {
				props: ['list'],
				template: `
          <div>
            <!-- 只有把数据传递给父级，传递给父级以后，父级高级数据才能够中的对谁进行修改 -->
            <li v-for="item in list" :key="item.id">
              <!-- 1. 给 slot 标签绑定一个属性，属性自定义，属性值是传递给父级的数据 -->
              <slot :hero="item"></slot>
            </li>
          </div>
        `
			})

			var vm = new Vue({
				el: '.box',
				data: {
					heroList: [
						{ id: 1, name: '亚瑟' },
						{ id: 2, name: '虞姬' },
						{ id: 3, name: '后羿' },
						{ id: 4, name: '鲁班' }
					]
				}
			})
		</script>
	</body>
</html>
